<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 基于Hadoop的降雨量分析系统</title>
    <style>
        :root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --secondary: #10b981;
            --background: #f3f4f6;
            --text: #1f2937;
            --text-light: #6b7280;
        }
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--background);
            color: var(--text);
        }
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        header {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
        }
        .nav-links {
            display: flex;
            gap: 1rem;
        }
        .nav-links a {
            text-decoration: none;
            color: var(--text);
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            transition: background-color 0.3s;
        }
        .nav-links a:hover {
            background-color: var(--background);
        }
        main {
            flex-grow: 1;
            padding: 2rem 0;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary);
        }
        .user-management {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 1.5rem;
        }
        .user-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        .search-bar {
            display: flex;
            gap: 0.5rem;
        }
        .search-bar input {
            padding: 0.5rem;
            border: 1px solid var(--text-light);
            border-radius: 0.25rem;
        }
        .button {
            display: inline-block;
            background-color: var(--primary);
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            transition: background-color 0.3s;
            border: none;
            cursor: pointer;
        }
        .button:hover {
            background-color: var(--primary-dark);
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            text-align: left;
            padding: 0.75rem;
            border-bottom: 1px solid var(--background);
        }
        th {
            background-color: var(--primary);
            color: white;
        }
        tr:nth-child(even) {
            background-color: var(--background);
        }
        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }
        .edit-button, .delete-button {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .edit-button {
            background-color: var(--secondary);
            color: white;
        }
        .edit-button:hover {
            background-color: #0d9668;
        }
        .delete-button {
            background-color: #ef4444;
            color: white;
        }
        .delete-button:hover {
            background-color: #dc2626;
        }
        footer {
            background-color: var(--text);
            color: white;
            text-align: center;
            padding: 1rem 0;
            margin-top: 2rem;
        }
        /* 模态窗口遮罩样式 */
        .modal {
            display: none; /* 初始隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            z-index: 1000;
        }

        /* 模态窗口内容样式 */
        .modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 400px;
            text-align: center;
        }

        /* 按钮样式 */
        .button {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            border: none;
            background-color: var(--primary);
            color: white;
            cursor: pointer;
            border-radius: 0.25rem;
            transition: background-color 0.3s;
        }

        .button:hover {
            background-color: var(--primary-dark);
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <div class="logo">降雨量分析系统 - 管理员</div>
                <div class="nav-links">
                    <a href="home">首页</a>
                    <a href="user-management">用户管理</a>
                    <a href="#tasks">任务管理</a>
                    <a href="#data">数据管理</a>
                    <a href="#cache">缓存管理</a>
                    <a href="#profile">个人中心</a>
                    <a href="/logout">退出账号</a>
                </div>
            </nav>
        </div>
    </header>

    <main>
        <div class="container">
            <h1>用户管理</h1>
            <section class="user-management">
                <div class="user-controls">
                    <form id="search-form" method="POST">
                        <input type="hidden" name="action" value="search_user">
                        <div class="search-bar">
                            <input type="text" name="search_query" placeholder="搜索用户...">
                            <button class="button" type="submit">搜索</button>
                        </div>
                    </form>
                    <button class="button" onclick="showAddUserModal()">添加新用户</button>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all" onclick="toggleSelectAll(this)"></th>
                            <th>序号</th> <!-- 添加序号列 -->
                            <th>ID</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>角色</th>
                            <th>注册日期</th>
                            <th>上次登录</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="user-table-body">
                        {% for user in users %}
                        <tr>
                            <td><input type="checkbox" class="user-checkbox" value="{{ user.id }}"></td>
                            <td>{{ (page - 1) * per_page + loop.index }}</td> <!-- 显示序号 -->
                            <td>{{ user.id }}</td>
                            <td>{{ user.username }}</td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.role }}</td>
                            <td>{{ user.created_at }}</td>
                            <td>{{ user.last_login }}</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="edit-button" onclick="editUser({{ user.id }})">编辑</button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>

                <button class="button" onclick="bulkDelete()">批量删除</button>

                <!-- 分页导航 -->
                <section class="pagination">
                    {% if page > 1 %}
                        <a href="{{ url_for('user_management', page=page-1) }}" class="button">上一页</a>
                    {% endif %}

                    <span>第 {{ page }} 页 / 共 {{ total_pages }} 页</span>

                    {% if page < total_pages %}
                        <a href="{{ url_for('user_management', page=page+1) }}" class="button">下一页</a>
                    {% endif %}
                </section>
            </section>
        </div>
    </main>


    <div id="add-user-modal" class="modal">
        <div class="modal-content">
            <h2>添加新用户</h2>
            <form id="add-user-form" method="POST">
                <input type="hidden" name="action" value="add_user">
                <input type="text" name="username" placeholder="用户名" required>
                <input type="email" name="email" placeholder="邮箱" required>
                <input type="password" name="password" placeholder="密码" required>
                <select name="role" required>
                    <option value="user">用户</option>
                    <option value="admin">管理员</option>
                </select>
                <button type="submit" class="button">添加</button>
                <button type="button" class="button" onclick="closeModal()">关闭</button>
            </form>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>降雨量分析系统 &copy; 2024</p>
        </div>
    </footer>

    <script>
        function showAddUserModal() {
            document.getElementById('add-user-modal').style.display = 'flex';
        }

        function closeModal() {
            document.getElementById('add-user-modal').style.display = 'none';
        }

        window.onclick = function(event) {
            const modal = document.getElementById('add-user-modal');
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        };

        function toggleSelectAll(checkbox) {
            const checkboxes = document.querySelectorAll('.user-checkbox');
            checkboxes.forEach(cb => cb.checked = checkbox.checked);
        }

        function bulkDelete() {
            const selectedUsers = Array.from(document.querySelectorAll('.user-checkbox:checked')).map(cb => cb.value);
            if (selectedUsers.length === 0) {
                alert('请至少选择一个用户进行删除。');
                return;
            }

            if (!confirm('确定要删除所选用户吗？')) return;

            const formData = new FormData();
            formData.append('action', 'bulk_delete');
            selectedUsers.forEach(id => formData.append('user_ids', id));  // 确保传递多选用户 ID 列表

            fetch('/admin/user-management', {
                method: 'POST',
                body: formData
            }).then(response => {
                if (response.ok) {
                    alert('删除成功');
                    location.reload();
                } else {
                    alert('删除失败，请重试');
                }
            }).catch(error => {
                console.error('请求失败:', error);
                alert('删除失败，请检查网络连接');
            });
        }

        function editUser(userId) {
            const newRole = prompt("请输入新的角色（user/admin）：");
            if (newRole !== null) {
                const form = new FormData();
                form.append('action', 'edit_user');
                form.append('user_id', userId);
                form.append('role', newRole);

                fetch('/admin/user-management', {
                    method: 'POST',
                    body: form
                }).then(response => {
                    if (response.ok) {
                        location.reload();
                    } else {
                        alert('编辑失败！');
                    }
                });
            }
        }
    </script>
</body>

</html>
